<template>
    <div>
        <mt-header fixed :title="title">
            <router-link to="/search" slot="right">
                <mt-button icon="search"></mt-button>
            </router-link>
        </mt-header>
        <ul class="fix-header fix-bottom" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
            <template v-for="item in novels">
                <v-touch v-on:press="onPress(item.id)">
                    <li class="index-li" >
                        <div v-on:click="check_is_read(item.id)">
                            <img v-lazy="item.cover" class="index-item-cover">
                            <div class="index-item-content">
                                <div class="index-item-content-title">{{ item.title }}</div>
                                <span class="index-item-content-m">{{item.style}} | {{item.auth}}</span>
                            </div>
                        </div>
                    </li>
                </v-touch>
            </template>
        </ul>
        <tabbar-components tabindex="index"></tabbar-components>
    </div>
</template>

<style lang="css" rel="stylesheet/css">
    .fix-bottom {
        margin-bottom:60px;
    }
    .mint-tabbar {
        min-height:40px;
    }
    .index-li {
        display:block;
        border-bottom: 1px solid #eee;
        height: 66px;
        width:100%;
    }
    .index-li a{
        height:100%;
        width:100%;
        display:block;
    }
    .index-item-cover {
        float:left;
        margin:5px 10px 5px 20px;
        width:40px;
        height:56px;
    }
    .index-item-content {
        margin-top:10px;
        margin-left:5px;
    }
    .index-item-content-title {
        font-size:13px;
        font-weight:600;
        height:32px;
        line-height:32px;
    }
    .index-item-content-m {
        font-size:11px;
    }
</style>

<script type="text/babel">
    import Vue from 'vue'
    import TabbarComponents from './tabbar.vue'
    import VueTouch from 'vue-touch'
    import { MessageBox } from 'mint-ui';

    Vue.use(VueTouch)

    export default{
        data(){
            return {
                title: "N小说 - 0广告和收费的阅读器",
                page: 0,
                loading: false,
                novels: []
            }
        },
        methods: {
            loadMore: function () {
                this.loading = true
                this.fetch()
            },
            created: function () {
                this.fetch()
            },
            check_is_read(nid) {
                let _this = this
                let bookmark = localStorage["novel_mark_id_" + nid]
                if (bookmark != undefined && bookmark > 0) {
                    _this.$router.push("/chapter/" + nid + "/" + bookmark)
                } else {
                    _this.$router.push("/novel/" + nid)
                }
            },
            onPress: function(id) {
                id = parseInt(id)
                let _this = this
                MessageBox.confirm('是否删除！', {
                    closeOnClickModal:false,
                }).then(action => {
                    let markStr = localStorage['novel_mark']
                    if (typeof(markStr) == 'undefined'){
                        return
                    }
                    let mark = JSON.parse(markStr)
                    let marknew = []
                    for(let i =0;i<mark.length;i++) {
                        if (parseInt(mark[i]) == id) {
                            localStorage.removeItem("novel_mark_id_" + id)
                            localStorage.removeItem("novel_cache_info_" + id)
                            continue
                        }
                        marknew.push(mark[i])
                    }
                    localStorage["novel_mark"] = JSON.stringify(marknew)
                    _this.novels.splice(_this.novels.find(item => item.id === id), 1)
                });
            },
            fetch: function () {
                let _this = this
                let markStr = localStorage['novel_mark']
                if (typeof(markStr) == 'undefined'){
                    return
                }
                let mark = JSON.parse(markStr)
                for(let i = 0; i < mark.length; i++) {
                    let cacheStr = localStorage['novel_cache_info_'+ mark[i]]
                    if (typeof(cacheStr) == 'undefined') {
                        _this.fetchData(mark[i])
                        continue
                    }
                    _this.novels.push(JSON.parse(cacheStr))
                }
            },
            fetchData: function(nid) {
                let _this = this
                _this.$http.get("https://novel.nightc.com/v1/novel/"+nid).then((response) => {
                    let body = response.body
                    if (body.code == 0) {
                        let novel = body.data
                        _this.novels.push(novel)
                        localStorage["novel_cache_info_"+nid] = JSON.stringify(novel)
                    }
                })
            }
        },
        components: {
            TabbarComponents,
        }
    }
</script>
